﻿<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/frame.css" />
<link rel="stylesheet" type="text/css" href="css/desk.css" />
<style type="text/css">

body{
	padding:20px;
}
.even{
	background:#eee;
}
.odd{
	background:#f2f399;
}
.optionsBox{
    height: 50px;
    line-height: 50px;
    background: #ccc;
    margin-bottom:20px;
    padding-left: 20px;
}
.button-bigBlue{
    padding: 5px 20px;
    height: auto;
    background: none repeat scroll 0% 0% #2492EE;
    color: #FFF;
    border: medium none;
    cursor: pointer;
    border-radius: 3px; 
}
</style>

</head>
<body>
    <div class="optionsBox">
        <button id="btn_data" class="button-bigBlue">修改数据(数据驱动)</button>
        <button id="btn_setData" class="button-bigBlue">修改数据(setState)</button>
        <button id="btn_delete" class="button-bigBlue">修改数据(delete item of array)</button>
    </div>

    <div id="desk" class="desk">
        <div class="app-create fl">
            <div class="app-create-hline"></div>
            <div class="app-create-vline"></div>
            <div class="app-create-text">新增基础服务</div>
        </div>
	    <!--模板 begin--> 
        <div id="templateDom">
            {{component}}
        </div>

	    <!--模板 end-->  
        <h1 style="float:left;width:100px;height:100px;">this is H1</h1>
    </div>

</body>
</html>

<script src="js/jquery.js"></script>
<script src="js/template.5.1.js"></script>
<script>
/*数据*/
data = {
    result:[
        {
            title:"我的应用1",
            url:"www.cnblogs.com/wsoft1",
            numbers:
            {
                app:{count:"100"}
            },
            //list:["1","2","3"]
            list:[{"a":"111","b":{"c":"ccc"}},"5","6"]
        },
        {
            title:"我的应用2",
            url:"www.cnblogs.com/wsoft2",
            numbers:
            {
                app:{count:"100"}
            },
            list:[{"a":"111","b":{"c":"ccc"}},"5","6"]
        },
        {
            title:"我的应用2",
            url:"www.cnblogs.com/wsoft2",
            numbers:
            {
                app:{count:"100"}
            },
            //list:["7","8","9"]
            list:[{"a":"111","b":{"c":"ccc"}},"5","6"]
        },
        {
            title:"我的应用3",
            url:"www.cnblogs.com/wsoft3",
            numbers:
            {
                app:{count:"100"}
            },
            //list:["10","11","12"]
            list:[{"a":"111","b":{"c":"ccc"}},"5","6"]
        }
    ]
};



var template = new wTemplate({
    repeatElement : document.querySelector("#templateDom"),
    data : data,
    beforeCreate : function(){
        //console.log("beforeCreate");
    },
    created : function(){
        //console.log("created");
    },
    mounted:function(){
        //数据渲染完毕，可以处理DOM或绑定事件
        console.log("mounted",this);
        /*
        $("#desk").on("click",".app-create",function(){
            alert("你想创建增值服务吗");
        });
        */
    },
    stateChange:function(item){
        //console.log(item);
    },
    render:function(object){
        var data = object.item;
        console.log("render:",object);

        return {
            "component":`
                <div>
                    ${
                        data.result.map(function(item){
                            return (`<div class="app-myapp fl {{bgcolor}}" title="{{title}}">
                                        <div class="app-myapp-shared">${item.numbers.app.count}</div>
                                        <div>
                                            <span>${item.list[0].b.c}</span>
                                            <br/>
                                            <i>list count:<span style="color:#F00;">${item.list.length}</span></i>
                                            <i>|${ !!item.list[3] ? item.list[3] : "" }</i>
                                            <i style="color:#00F;">(${ item.list[1] })</i>
                                        </div>
                                        <div class="app-myapp-caption">${item.title}</div>
                                    </div>`)
                        })
                    }
                </div>`,
        }
    },
    onEvent:function(node){
        //node is current element
        //console.log("www",node);
        //给每一个元素绑定事件
        node.onclick = function(e){

        }
    }
});


/*数据驱动，当数据改变时，页面数据更新*/
$("#btn_data").on("click",function(){
    
    data.result.push({
            title:"我的应用311",
            url:"www.cnblogs.com/wsoft3",
            numbers:
            {
                app:{count:"100"}
            },
            list:[{"a":"111","b":{"c":"ccc"}},"5","6"]
        });
    //data.result[0].title="7";
    template.render();
});

/*数据驱动，当数据改变时，页面数据更新*/
$("#btn_setData").on("click",function(){
    //data[1].list.push(300);
    //data[1].list[0].b.c = "@@@@"+Math.random();
    data.result[0].list[1] = "我";
    data.result[1].list[1] = "的";
    data.result[2].list[1] = "框";
    data.result[3].list[1] = "架";
});

$("#btn_delete").on("click",function(){
	data.result.pop();
    template.render();
});

</script>

